<template>
    <table class="my-table">
        <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in filteredRecords" :key="index">
          <td>{{item.date}}</td>
          <td>{{ item.doctor }}</td>
          <td>{{item.diagnosis}}</td>
          <td>{{item.prescription}}</td>
          <td><button @click="showDetails(item)">详情</button></td>
        </tr>
      </tbody>
    </table>
  </template>
  
  <script>
  export default {
    props: ['records', 'searchText'],
    computed: {
      filteredRecords() {
        if (this.searchText === '') return this.records;
        return this.records.filter(record => {
          return Object.values(record).some(value =>
            value.toString().toLowerCase().includes(this.searchText.toLowerCase())
          );
        });
      }
    },
    methods: {
      showDetails(record) {
        alert(`日期: ${record.date}, 医生: ${record.doctor}, 诊断: ${record.diagnosis}, 处方: ${record.prescription}`);
      }
    }
  };
  </script>

<style scoped>
.my-table {
  border-collapse: collapse;
  width: 100%;
}

.my-table td, .my-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.my-table th {
  background-color: #f2f2f2;
}
</style>